<template>
  <el-select
    v-model="value"
    :multiple="multiple"
    :disabled="disabled"
    collapse-tags
    clearable
    filterable
    :placeholder="placeholderText"
    @change="onChange"
  >
    <el-option
      v-for="(item, index) in Options"
      :key="index"
      :label="item.label"
      :value="item.value"
    >
      <!-- <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'SelectReponseStatus',
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholderText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      value: [],
      Options: {
      }
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    getList () {
      let list = [
        {
          value: '0',
          label: this.$t('edge.record.success')
        },
        {
          value: '4010',
          label: this.$t('openatccomponents.message.4010')
        },
        {
          value: '4002',
          label: this.$t('edge.record.errorranswer')
        },
        {
          value: '4003',
          label: this.$t('edge.record.devicedown')
        },
        {
          value: '4004',
          label: this.$t('edge.record.duplicateid')
        },
        {
          value: '4005',
          label: this.$t('edge.record.signalempty')
        },
        {
          value: '4006',
          label: this.$t('edge.record.signaltypenull')
        },
        {
          value: '4007',
          label: this.$t('openatccomponents.message.4007')
        },
        {
          value: '4008',
          label: this.$t('openatccomponents.message.4008')
        },
        {
          value: '4009',
          label: this.$t('openatccomponents.message.4009')
        }
        // {
        //   value: 'get-request',
        //   label: this.$t('edge.record.get-request')
        // },
        // {
        //   value: 'set-request',
        //   label: this.$t('edge.record.set-request')
        // },
        // {
        //   value: 'report',
        //   label: this.$t('edge.record.report')
        // },
        // {
        //   value: 'get-response',
        //   label: this.$t('edge.record.get-response')
        // },
        // {
        //   value: 'set-response',
        //   label: this.$t('edge.record.set-response')
        // },
        // {
        //   value: 'error-response',
        //   label: this.$t('edge.record.error-response')
        // },
        // {
        //   value: 'error-request',
        //   label: this.$t('edge.record.error-request')
        // },
        // {
        //   value: 'other',
        //   label: this.$t('edge.record.other')
        // }
      ]
      return list
    },
    onLoad () {
      this.Options = this.getList()
    },
    onChange (val) {
      this.$emit('onChange', val)
    },
    init (val) {
      let target = val
      if (this.multiple) {
        target = [val]
      }
      this.value = target
    },
    getNameById (id) {
      let res = ''
      for (const item of this.Options) {
        if (id === item.agentid) {
          res = item.name
          break
        }
      }
      return res
    }
  }
}
</script>
